<script setup lang="ts">
import { labels } from '/@/api/admin/metaField';
import { saveShowField } from '/@/api/admin/metaEntity';

const emit = defineEmits(['refresh']);

let currentEntityId = '';
const showFieldVisible = ref(false);

interface Option {
	key: number;
	label: string;
	disabled: boolean;
}

const fieldsData = ref<Option[]>([]);
const showFieldsData = ref([]);

const openDialog = (id: string, formJson: any) => {
	currentEntityId = id;
	fieldsData.value = [];
	labels(currentEntityId).then((res) => {
		console.log();
		res.data.forEach((item) => {
			fieldsData.value.push({
				key: item.label,
				label: item.name,
				disabled: false,
			});
		});
		showFieldsData.value = formJson != null ? formJson : [];
	});
	showFieldVisible.value = true;
};

const saveBaseShowField = () => {

	saveShowField(currentEntityId, showFieldsData.value).then((res) => {
		showFieldVisible.value = false;
		emit('refresh');
	});
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<template>
	<el-dialog
		title="列表显示设置"
		v-model="showFieldVisible"
		width="700px"
		:draggable="true"
		style="display: flex; flex-direction: column; align-items: center; min-width: 700px"
	>
		<el-transfer v-model="showFieldsData" :data="fieldsData" style="text-align: left; display: inline-block" />
		<template #footer>
			<el-button type="primary" @click="saveBaseShowField"> 确认</el-button>
		</template>
	</el-dialog>
</template>

<style scoped lang="scss"></style>